<template>
  <!-- 教务管理-约名师-取消订单 -->
  <div class="orderForeignCancelOrder">
    <div class="content-foreign-cancelOrder">
      <el-table
        :data="tableData"
        border
        style="width: 100%;font-size:0.16rem;">
        <el-table-column
          width="90px"
          prop="orderBy"
          align="center"
          label="课程序号">
        </el-table-column>
         <el-table-column
          prop="classSyllabusName"
          align="center"
          label="课节名称">
        </el-table-column>
        <el-table-column
          width="220px"
          prop="courseTime"
          align="center"
          label="上课时间">
        </el-table-column>
        <el-table-column
          prop="teacherUserName"
          align="center"
          label="教师">
        </el-table-column>
        <el-table-column
          prop="feiboTeacherName"
          align="center"
          label="名师">
        </el-table-column>
        <el-table-column
          width="110px"
          prop="statu"
          align="center"
          label="状态">
        </el-table-column>
        <el-table-column
          width="90px"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button style="font-size:0.16rem;"
             v-if="!scope.row.disableCancelBtn"
             @click="cancelOrder(1,scope.row)" type="text" size="small">取消预约</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="row">
        <el-button class="resetElement" :disabled="cancelAllBtnDisable" @click="cancelOrder(2,tableData)">全部取消</el-button>
      </div>
    </div>
    <!-- 预约成功结果反馈弹窗 -->
    <el-dialog class="cancelOrderConfirm"
     :modal="false"
     :visible.sync="cancelOrderConfirmVisible"
     title="确定取消吗？"
     >
      <div class="box-success">
        <div class="row" style="text-align: left;">
          <span>取消订单会自动消除掉已排未上的课，该订单之后无法继续排课。</span>
        </div>
        <div class="row" style="text-align: left;">
          <span>请选择一个取消的原因(选填)：</span>
        </div>
        <div class="row box-reason">
          <div :class="'reasonItem '+(row.select?'select':'')" @click="selectReason(index,cancelReasonList)" v-for="(row,index) in cancelReasonList" :key="index">{{row.value}}</div>
        </div>
        <div class="row">
          <el-button class="resetElement" style="width:1.4rem;" @click="cancelOrderConfirmVisible=false;">暂不取消</el-button>
          <el-button class="resetElement" style="margin-left:0.16rem;width:1.4rem;" @click="confirmCancelOrder">确定取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let vm;
export default {
  props:['orderForeignCancelOrder'],
  data() {
    return {
      tableData: [],
      cancelOrderConfirmVisible:false,
      cancelReasonList:[
        {select:false,value:'更换外教'},
        {select:false,value:'更换时间'},
        {select:false,value:'更换教材'},
        {select:false,value:'学员请假'},
        {select:false,value:'外教请假'},
        {select:false,value:'机构放假'},
        {select:false,value:'外教放假'},
        {select:false,value:'不接受代课'},
        {select:false,value:'系统故障'},
        {select:false,value:'其他'},
      ],
      cancelAllBtnDisable:false
    };
  },
  methods: {
    /**初始化数据 */
    initBydata(data){
      if(!data)return;
      vm.orderData=data;
      vm.tableData=data.acOrderItem;
      vm.cancelAllBtnDisable=true;
      vm.tableData.forEach(ele=>{
        ele.statu='预约成功';
        ele.courseTime=ele.startTime+' - '+(ele.endTime?(ele.endTime.split(' ')[1]):'');
        if(ele.cancleFlag==1){
          ele.statu='已退费';
        }
        else{
          //交易成功
          let time=(ele.startTime+':00').replace(/-/g,'/');
          let start=new Date(time);
          let bt=start.getTime()-(new Date()).getTime();
          if(bt<=0){
            ele.statu='交易成功';
          }
        }
        
        if(ele.statu=='已退费'||ele.statu=='交易成功'){
          ele.disableCancelBtn=true;
        }
        else{
            ele.disableCancelBtn=false;
            vm.cancelAllBtnDisable=false;
        }
      });

    },
    /**显示取消弹窗 */
    cancelOrder(type,data){
      
      this._cancelType=type;
      this.resetReason();
      if(type==1){
        this.cancelSyllabusList=[data];
      }
      else{
        let cdata=[];
        vm.tableData.forEach(ele=>{
          if(ele.cancleFlag!=1&&ele.statu!='交易成功'){
            cdata.push(ele);
          }
        });
        this.cancelSyllabusList=cdata;
      }
      //判断时间 公共课需提前两小时取消；专属课需提前半小时
      let chaoshi=false;
      this.cancelSyllabusList.forEach(ele=>{
        let time=ele.startTime+':00';
        time.replace(/-/g,'/');
        let start=new Date(time);
        let bt=start.getTime()-(new Date()).getTime();
        let minutes=Math.floor(bt/(1000*60));
        // if(minutes<30){

        // }
        if(minutes<120){
          chaoshi=true;
        }
      });
      if(chaoshi){
        vm.$message({
          message: '所选订单包含超时订单(需提前2小时取消)，不可取消！',
          type: 'warning'
        });
        return;
      }
      this.cancelOrderConfirmVisible=true;
    },
    /**选择取消原因 */
    selectReason(index,data){
      data.forEach(d=>{d.select=false;});
      data[index].select=true;
    },
    resetReason(){
       this.cancelReasonList.forEach(d=>{d.select=false;});
    },
    /**确认取消订单 */
    confirmCancelOrder(){
      let param={
        classId:vm.orderData.classId,
        orderId:vm.orderData.orderId,
        classOrTrialClass:vm.orderData.classOrTrialClass,
        acOrderItemEntityList:this.cancelSyllabusList,
        _wait:'',
      };
      // if(vm.orderData.classOrTrialClass==1){
      //   param['classSyllabusEntityList']=vm.cancelSyllabusList;
      // }
      // else if(vm.orderData.classOrTrialClass==2){
      //   param['trialClassSyllabusEntityList']=vm.cancelSyllabusList;
      // }
      api.canclefeiboSyllabusTeacher(param).then(function(d){
        // console.log(d);
        if(d.resultCode==2000){
          vm.cancelOrderConfirmVisible=false;
          vm.$message({
            message: '取消订单成功！',
            type: 'success'
          });
          vm.cancelCallBack();
        }
        else{
          vm.$message({
            message: d.message||'操作失败！',
            type: 'error'
          });
        }
      });
    },
    cancelCallBack(){
      this.$emit('cancel',null);
    }
  },
  mounted() {},
  computed: {},
  watch: {},
  created: function() {vm=this;}
};
</script>

<style lang="scss">
.orderForeignCancelOrder {
  width: 100%;
  .content-foreign-cancelOrder {
    padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.16rem;
    .row{
      margin-top: 0.12rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.orderForeignCancelOrderPopup{
  background-color: rgba(0, 0, 0, 0.3);
  .el-dialog {
    width: 11rem;
    // min-height: 100%;
    // margin: 0 !important;
    .el-dialog__header {
      
    }
    .el-dialog__title {
      font-size: 0.25rem;
      font-weight: bold;
      color: #333333;
    }
    .el-dialog__headerbtn {
      font-size: 0.25rem !important;
    }
  }
  .el-dialog::-webkit-scrollbar {
    width: 0.1rem;
    height: 0.1rem;
  }
  .el-dialog::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background: #bbbbbb;
  }
  .el-dialog::-webkit-scrollbar-track {
    background: #f2f6fc;
  }
}
.cancelOrderConfirm{
    font-size: 0.16rem;
    .box-success{
      .row{
        width: 100%;
        text-align: center;
        margin: 0.1rem 0;
      }
      .box-reason{
        // height: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        .reasonItem{
          margin: 0.05rem;
          padding: 0 0.08rem;
          height: 0.3rem;
          line-height: 0.3rem;
          border: 0.01rem solid #666666;
          border-radius: 0.05rem;
          user-select: none;
        }
        .reasonItem:hover{
          cursor: pointer;
        }
        .reasonItem.select{
          background-color: #c9ff9a;
        }
      }
    }
    .el-dialog {
      width: 5rem;
      // min-height: 100%;
      margin-top: 38vh !important;
      .el-dialog__header {
        text-align: center;
      }
      .el-dialog__title {
        font-size: 0.25rem;
        font-weight: bold;
        color: #333333;
      }
      .el-dialog__headerbtn {
        font-size: 0.25rem !important;
      }
    }
  }

</style>